<script setup lang="tsx">
import { ref } from "vue";
import "./MyLitComponent";

const count = ref(123);
const msg = ref("init msg111");
const list = ref([
  { type: "text", content: "message" },
  { type: "table", content: "columns-dataSource" },
  { type: "text", render: () => <div>custom render</div> },
]);
const columns = [
  {
    title: "标题",
    dataIndex: "name",
    render: (text) => (
      <div>
        <h3>{text}</h3>
        <p>副标题</p>
      </div>
    ),
  },
  {
    title: "大小",
    dataIndex: "size",
  },
  {
    title: "所有者",
    dataIndex: "owner",
  },
  {
    title: "更新日期",
    dataIndex: "updateTime",
  },
];
const dataSource = [
  {
    key: "1",
    name: "Semi Design 设计稿.fig",
    nameIconSrc:
      "https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/figma-icon.png",
    size: "2M",
    owner: "姜鹏志",
    status: "success",
    updateTime: "2020-02-02 05:13",
    avatarBg: "grey",
  },
  {
    key: "2",
    name: "Semi Design 分享演示文稿",
    nameIconSrc:
      "https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/docs-icon.png",
    size: "2M",
    owner: "郝宣",
    status: "pending",
    updateTime: "2020-01-17 05:31",
    avatarBg: "red",
  },
  {
    key: "3",
    name: "设计文档",
    nameIconSrc:
      "https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/docs-icon.png",
    size: "34KB",
    status: "wait",
    owner: "Zoey Edwards",
    updateTime: "2020-01-26 11:01",
    avatarBg: "light-blue",
  },
];
</script>

<template>
  <div>
    table.vue
    <h1>{{ count }}</h1>
    <my-lit-component
      :msg="msg"
      :list.prop="list"
      :columns.prop="columns"
      :dataSource.prop="dataSource"
    ></my-lit-component>
  </div>
</template>
